import React, { Fragment } from 'react'
import './index.less'

const StepFlow = ({ steps, title }) => {
  return (
    <div className="flow">
      <div className="flow-step flow-step-minWidth">
        <div>{title}:</div>
        <div className="step-right">
          {
            steps.map((item, index) => {
              return (
                <Fragment key={index}>
                  <div className="step-item">
                    <img className="step-img" style={{ width: item.iconW, height: item.iconH }} src={item.img} alt=""
                    />
                    <div className={item.noClick ? 'step-text step-no-click' : 'step-text'}
                    ><span className="step-number">{item.number}</span>{item.text}</div>
                  </div>
                  {
                    index !== steps.length - 1 &&
                    <div className="flow-step-arrow"> </div>
                  }
                </Fragment>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}

export default StepFlow
